<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>props的批量传递</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//定义一个Person组件
			class Person extends React.Component{
				render(){
					console.log('render',this)
					const {name,age,sex,address,car} = this.props
					return (
						<ul>
							<li>姓名：{name}</li>	
							<li>年龄：{age}</li>	
							<li>性别：{sex}</li>	
							<li>住址：{address}</li>	
							<li>座驾：{car}</li>	
						</ul>
					)
				}
			}
			//准备好一个人的数据
			let p = {
				name:'张三',
				age:18,
				sex:'女',
				address:'宏福科技园',
				car:'马自达·阿特兹'
			}
			console.log('@',...p)
			//渲染组件到页面
			ReactDOM.render(<Person {...p}/>,document.getElementById('root'))
			// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} address={p.address} car={p.car}/>,document.getElementById('root'))
		</script>
	</body>
</html>